<template>
  <BaseCard class="h-full flex flex-col">
    <template #header>
      <div class="flex">
        <div class="title flex items-center">
          <img
            src="@/assets/images/do-header-icon.png"
            alt=""
            class="mr-[8px]"
          />办理统计
        </div>
      </div>
    </template>
    <div class="flex flex-1 flex-wrap pt-[20px]" >
      <template v-if="handlecountList.length>0">
      <div class="statistics-item flex items-center">
        <div class="flex justify-center items-center">
          <img src="@/assets/images/doicon1.png" alt="" />
        </div>
        <div class="statistics-text">
          <div class="statistics-count"><span><countTo :startVal="0" :endVal="getNum('项目','已办')"  :duration="1500"></countTo></span>项</div>
          <div class="statistics-name">项目已办</div>
        </div>
      </div>
      
      <div class="statistics-item flex items-center">
        <div class="flex justify-center items-center">
          <img src="@/assets/images/doicon2.png" alt="" />
        </div>
        <div class="statistics-text">
          <div class="statistics-count"><span><countTo :startVal="0" :endVal="getNum('经费','已办')"  :duration="1500"></countTo></span>项</div>
          <div class="statistics-name">经费已办</div>
        </div>
      </div>
      <div class="statistics-item flex items-center" >
        <div class="flex justify-center items-center">
          <img src="@/assets/images/doicon3.png" alt="" />
        </div>
        <div class="statistics-text">
          <div class="statistics-count"><span><countTo :startVal="0" :endVal="getNum('成果','已办')"  :duration="1500"></countTo></span>项</div>
          <div class="statistics-name">成果已办</div>
        </div>
      </div>
      <div class="statistics-item flex items-center cursor-pointer" @click="gototodo('项目')">
        <div class="flex justify-center items-center">
          <img src="@/assets/images/doicon4.png" alt="" />
        </div>
        <div class="statistics-text">
          <div class="statistics-count"><span><countTo :startVal="0" :endVal="getNum('项目','待办')"  :duration="1500"></countTo></span>项</div>
          <div class="statistics-name">项目待办</div>
        </div>
      </div>
      <div class="statistics-item flex items-center cursor-pointer" @click="gototodo('经费')">
        <div class="flex justify-center items-center">
          <img src="@/assets/images/doicon5.png" alt="" />
        </div>
        <div class="statistics-text">
          <div class="statistics-count"><span><countTo :startVal="0" :endVal="getNum('经费','待办')"  :duration="1500"></countTo></span>项</div>
          <div class="statistics-name">经费待办</div>
        </div>
      </div>
      <div class="statistics-item flex items-center cursor-pointer" @click="gototodo('成果')">
        <div class="flex justify-center items-center">
          <img src="@/assets/images/doicon6.png" alt="" />
        </div>
        <div class="statistics-text">
          <div class="statistics-count"><span><countTo :startVal="0" :endVal="getNum('成果','待办')"  :duration="1500"></countTo></span>项</div>
          <div class="statistics-name">成果待办</div>
        </div>
      </div>
      </template>
    </div>
  </BaseCard>
</template>

<script setup>
import BaseCard from "./BaseCard.vue";
import * as homeApi  from "@/api/home/index";
import { CountTo } from 'vue3-count-to'

const router = useRouter();
const  handlecountList=ref([])
const  handlecountNumList=ref([])

const  handlecountshow=ref([])

onMounted(async() => {
let  res  =  await homeApi.handleCount();
if(res){
  handlecountList.value=res.data
}
})

const  getNum=(model,type)=>{
   const bb=  handlecountList.value.find(temp=>temp.modelName==model&&temp.type==type)
   return bb.num  
}

const  gototodo=(name)=>{
     const obj = { path: "/home/todoList/", name: "needtodoList", query:{type: name}};
      router.push(obj)
}

</script>

<style scoped lang="scss">
@import url("../index.scss");
.statistics-item {
  flex-basis: 33.3%;
  font-size: 14px;
  padding: 0 5px;
  img {
    max-width: 100%;
  }
}
.statistics-text {
  min-width: 60px;
  margin-left: 8px;
}
.statistics-count {
  font-weight: 500;
  color: #747774;
  vertical-align: baseline;
  span {
    font-size: 24px;
    margin-right: 2px;
  }
}
.statistics-name {
  color: #999;
}
</style>
